<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>日历</title>
    <style>
        body{
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }
        .container{
            width: 352px;
        }
        h2{
            text-align: center;
        }
        .h{
            color: #999;
        }
        .week,
        .date{
            display: flex;
            flex-wrap: wrap;
            border: 1px solid #999;
        }
        .date span,
        .week span{
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            box-shadow: 1px 1px 1px rgba(0, 0, 0,0.3);
        }
        .today{
            background-color: aqua;
            color: #fff;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="title">
        <h2>
            <span id="danian">2019</span>年 <span id="xiaoyue">5</span>月
        </h2>
    </div>
    <div class="week">
        <span>日</span>
        <span>一</span>
        <span>二</span>
        <span>三</span>
        <span>四</span>
        <span>五</span>
        <span>六</span>
    </div>
    <div class="date date1" id="date1">


    </div>
    <div class="date date2" style="display: none">
        <span class="h">28</span>
        <span class="h">29</span>
        <span class="h">30</span>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
        <span>7</span>
        <span>8</span>
        <span>9</span>
        <span>10</span>
        <span>11</span>
        <span>12</span>
        <span>13</span>
        <span>14</span>
        <span>15</span>
        <span class="today">16</span>
        <span>17</span>
        <span>18</span>
        <span>19</span>
        <span>20</span>
        <span>21</span>
        <span>22</span>
        <span>23</span>
        <span>24</span>
        <span>25</span>
        <span>26</span>
        <span>27</span>
        <span>28</span>
        <span>29</span>
        <span>30</span>
        <span>31</span>
        <span class="h">1</span>
        <span class="h">2</span>
        <span class="h">3</span>
        <span class="h">4</span>
        <span class="h">5</span>
        <span class="h">6</span>
        <span class="h">7</span>
        <span class="h">8</span>
    </div>
</div>

<script src="js/script.js"></script>
</body>
</html>